import React, { memo } from "react";
import style from "./sty.module.css";
import Scroll from "@/components/scroll";
import { formatNumber } from "@/utils/util";
import PropTypes from "prop-types";
import dayjs from "dayjs";
import { useHistory } from "react-router";
const Mvs = (props) => {
  const history = useHistory();
  const { mvs } = props;
  const goTo = (url) => {
    history.push(url);
  };
  return (
    <Scroll>
      <ul className={style.mvs}>
        {mvs &&
          mvs.map((item) => (
            <li key={item.id} onClick={() => goTo(`/mv/${item.id}`)}>
              <div className={style.left}>
                <img src={item.imgurl16v9} alt="" style={{ width: 120 }} />
                <p className={style.playCount}>
                  <span
                    className={"iconfont icon-bofang1"}
                    style={{ fontSize: 12 }}
                  />
                  {formatNumber(item.playCount)}
                </p>
              </div>
              <div className={style.right}>
                <div className={style.title}>{item.name}</div>
                <div>{dayjs(item.publishTime).format("YYYY-MM-DD")}</div>
              </div>
            </li>
          ))}
      </ul>
    </Scroll>
  );
};

Mvs.propTypes = {
  mvs: PropTypes.array,
};
Mvs.defaultProps = {
  mvs: [],
};
export default memo(Mvs);
